<template>
  <div v-title="'订单快照 - 世外生活运营平台'">
    <mk-breadcrumb  :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="content-box MkOrderSnapshot" style="overflow:hidden;" v-loading="loadingTab" element-loading-text="拼命加载中">
      <div class="MkProductDetailContent">
        <div class="content">
          <div class="upDiv">
            <div class="leftDiv">
              <div class="showBigImage" @click="viewImage(bigImage.url)">
                <img alt='' :src="bigImage.url" />
              </div>
              <div class="showSmallImage">
                <div class="imageList" v-for="image in productDetail.images" @mouseover="switchImage(image)">
                  <img alt='' :src="image.thumbImageURL" />
                </div>
              </div>
            </div>
            <div class="rightDiv">
              <div class="productTitle">{{productDetail.goodsName}}</div>
              <div class="otherInfo">{{productDetail.feature}}</div>
              <div class="productInfo">
                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">商品ID</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">{{productDetail.goodsNumber}}</el-col>
                </el-row>

                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">商家编号</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">{{productDetail.sellerNumber}}</el-col>
                </el-row>

                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">商品条形码</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">{{productDetail.goodsCode}}</el-col>
                </el-row>

                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">商品价格</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">￥{{productDetail.price}}</el-col>
                </el-row>

                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">商品分类</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">{{productDetail.categoryName}}</el-col>
                </el-row>

                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">商品规格</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">{{productDetail.attrDescription}}</el-col>
                </el-row>

                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">运费</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">{{productDetail.transportMoney?'￥'+productDetail.transportMoney:'包邮'}}</el-col>
                </el-row>
              </div>
              <div class="serverInfo" v-if="productDetail.goodsService">服务信息：
                {{productDetail.goodsService.replace(/,/g,'、')}}
              </div>
              <div class="sendInfo">配送信息：由
                <span style="color:#3BC0C3">{{productDetail.shopName}}</span>发货，并提供售后服务。
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </el-scrollbar>
    <!--预览图片-->
    <el-dialog :visible.sync="imageDialogVisible"  custom-class="show-image-dialog" top="0%">
      <img :src="imageViewUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import MkBreadcrumb from '../../components/MkBreadcrumb.vue'
import orderService from '../../services/order'
import {mapState} from 'vuex'
export default {
  name: 'MkOrderSnapshot',
  components: {
    MkBreadcrumb
  },
  computed: mapState({
    bodyHeight: state => state.global.bodyHeight,
    fixedHeightSmall: state => state.global.fixedHeightSmall,
  }),
  methods: {
    viewImage(src) {
      this.imageDialogVisible = true;
      this.imageViewUrl = src;
    },
    switchImage(image) {
      this.bigImage = image;
    }
  },
  mounted: function() {
      let query = this.$route.query;
      console.log(query)
    this.breadcrumbData.list[1] = query.bread; //跳转到订单列表
    this.breadcrumbData.list[2].query = {tab:query.bread.query.tab,path:query.bread.path,id:this.$route.query.orderId};//跳转到订单详情
    this.breadcrumbData.returnData.query = {tab:query.bread.query.tab,path:query.bread.path,id:this.$route.query.orderId}//返回上一级
    this.loadingTab = true;
    orderService.loadOrderSnapshot({id:this.$route.query.orderId}, (data) => {
      this.productDetail = data.data;
      if (this.productDetail.images.length > 0) {
        this.bigImage = this.productDetail.images[0];
      }
      var attrDescription = this.productDetail.attrDescription;
      if(attrDescription) {
          var str = '';
        var arr = attrDescription.split('，');
        console.log(arr);
        for(var i = 0;i<arr.length;i++) {
            if(arr[i].split(":").length>1) {
              str += arr[i].split(':')[1];
            }
        }
        if(str) {
          str = '已选'+str;
        }
        this.productDetail.attrDescription = str;
      }
      this.loadingTab = false;
    });
  },
  data() {
    return {
      loadingTab: false,
      imageViewUrl: '',
      imageDialogVisible: false,
      breadcrumbData: {
        list: [
          { name: '订单管理', path: null, clickAble: false },
          { name: '订单列表', path: null, clickAble: true,query:null },
          { name: '订单详情', path: '/orderDetail', clickAble: true,query:null },
          { name: '商品快照', path: null, clickAble: false }
        ],
        returnData: {
          isReturn: true, path: '/orderDetail',query:null
        },
        iconName: 'product-icon',
      },
      productDetail: {},
      bigImage: {},
    }
  }
}
</script>
<style lang="less">
@import '../../assets/style/main.less';

.MkOrderSnapshot {
  .MkProductDetailContent {
    background-color: #fff;
    padding: 60px 0 40px;
    .content {
      width: 1030px;
      margin: 0px auto;
      .upDiv {
        overflow: hidden;
        .leftDiv {
          float: left;
          width: 400px;
          .showBigImage {
            width: 400px;
            height: 400px;
            background: @borderColor;
            cursor: pointer;
            position: relative;
            img {
              max-width: 100%;
              max-height: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              .my-transform(translate(-50%, -50%));
            }
          }
          .showSmallImage {
            margin-top: 10px;
            overflow: hidden;
            cursor: pointer;
            .imageList {
              width: 70px;
              height: 70px;
              background: @borderColor;
              float: left;
              margin: 5px;
              position: relative;
              img {
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                .my-transform(translate(-50%, -50%));
              }
            }
          }
        }
        .rightDiv {
          float: right;
          width: 600px;
          .productTitle {
            font-size: 20px;
            color: @fontColorOne;
          }
          .otherInfo {
            color: @primaryColor;
            font-size: 14px;
            margin: 20px 0 10px;
          }
          .productInfo {
            padding: 10px 0;
            background: #F6F7F8;
            margin-bottom: 5px;
            position: relative;
            .el-row {
              padding:10px 0;
              font-size: 14px;
              .el-col {
                /*margin-bottom: 20px;*/
              }
              .infoValue {
                padding-left: 20px;
              }
              .proValue {
                span {
                  display: inline-block;
                  height: 30px;
                  padding: 0 10px;
                  line-height: 30px;
                  background: #E1ECEF;
                  margin-right: 10px;
                  .my-border-radius(3px);
                  cursor: pointer;
                }
              }
            }
          }
          .serverInfo,.sendInfo {
            font-size: 14px;
            color: @fontColorTwo;
            line-height: 25px;
          }
        }
      }
    }
  }
}
</style>
